<template>
  <div
    class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg transform transition-all p-4 hover:shadow-lg h-full flex flex-col max-w-full overflow-hidden"
  >
    <div class="flex flex-col h-full">
      <div class="flex items-center mb-2">
        <!-- 图标容器 -->
        <div
          class="flex-shrink-0 p-2 bg-primary-light/50 dark:bg-primary-light/70 rounded-md mr-2"
        >
          <!-- 使用SVG图标 -->
          <div
            v-if="typeof project.icon === 'string'"
            class="w-5 h-5 sm:w-6 sm:h-6 text-primary-dark"
            v-html="project.icon"
          ></div>
          <div v-else class="w-5 h-5 sm:w-6 sm:h-6 text-primary-dark">
            <!-- 备用图标 -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
              />
            </svg>
          </div>
        </div>
        <!-- 标题 -->
        <h3
          class="text-base font-medium text-gray-800 dark:text-gray-300 truncate flex-1 min-w-0 overflow-hidden"
        >
          {{ project.name }}
        </h3>
      </div>

      <!-- 描述 -->
      <p
        class="text-sm text-gray-600 mt-1 dark:text-gray-300 line-clamp-2 mb-3 overflow-hidden"
      >
        {{ project.description || '暂无描述' }}
      </p>

      <!-- 语言标签 -->
      <div class="flex items-center gap-2 mt-auto">
        <span
          v-if="project.language"
          class="inline-flex items-center text-xs text-gray-600 dark:text-gray-400"
        >
          <span
            class="w-2 h-2 rounded-full mr-1"
            :style="{
              backgroundColor: getLanguageColor(project.language)
            }"
          ></span>
          {{ project.language }}
        </span>
      </div>

      <!-- 底部区域 -->
      <div
        class="flex items-end justify-between mt-2 pt-2 border-t border-gray-100 dark:border-gray-800 w-full overflow-hidden"
      >
        <a
          :href="project.html_url"
          target="_blank"
          class="inline-flex items-center text-sm text-primary-dark hover:text-primary-dark/80 transition-colors"
        >
          查看项目
          <svg
            class="w-4 h-4 ml-1"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
            />
          </svg>
        </a>
        <div class="flex items-center space-x-3">
          <div
            class="flex items-center text-xs text-gray-500 dark:text-gray-400"
          >
            <svg
              class="w-4 h-4 mr-1"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
            {{ formatDate(project.updated_at || project.pushed_at) }}
          </div>
          <div
            class="flex items-center text-xs text-gray-500 dark:text-gray-400"
          >
            <svg
              class="w-4 h-4 mr-1"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
              />
            </svg>
            {{ project.stargazers_count || project.watchers_count || 0 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  project: {
    type: Object,
    required: true
  }
})

// 格式化日期
const formatDate = (date) => {
  if (!date) return '未知日期'
  return dayjs(date).format('YYYY/MM/DD')
}

// 获取语言对应的颜色
const getLanguageColor = (language) => {
  const colors = {
    JavaScript: '#f1e05a',
    TypeScript: '#2b7489',
    HTML: '#e34c26',
    CSS: '#563d7c',
    Vue: '#41b883',
    Python: '#3572A5',
    Java: '#b07219',
    Go: '#00ADD8',
    PHP: '#4F5D95',
    Ruby: '#701516',
    Rust: '#dea584',
    C: '#555555',
    'C++': '#f34b7d',
    'C#': '#178600',
    Swift: '#ffac45',
    Kotlin: '#F18E33',
    Dart: '#00B4AB',
    Shell: '#89e051',
    PowerShell: '#012456',
    NodeJS: '#68A063'
  }
  return colors[language] || '#8257e5' // 默认颜色
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .project-card {
    padding: 0.75rem;
  }

  .project-card-title {
    font-size: 1rem;
  }

  .project-card-description {
    font-size: 0.75rem;
  }
}
</style>
